<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        min-width: 1280px !important;
        max-width: 1920px;
    }
    .world{
        background: url(./img/world/bg-common.jpg) repeat;
        width: 100%;
        /* height: 649px; */
        margin-bottom: -85px;
    }
    .world .banner-world{
        width: 100%;
        height: 649px;
        background: url(./img/world/banner-word.jpg) center top repeat;
    }

    .world .world-box .world-ul{
        width: 80%;
        height: 108px; 
        background: url(./img/world/bg-navsub-word.png);
        margin: 0 auto;
        background-size: 100% 100%;
        position: relative;
        top: -88px;
    }
    .world .world-box .world-ul ul{
        list-style: none;
        width: 100%;
        height: 108px; 
        align-items: center;
    }
    .world .world-box .world-ul ul li{
        display: inline-block;
        height: 100%;
        width: 33%;
        box-sizing: border-box;
        padding: 30px 70px;
        cursor: pointer;
    }
    .world .world-box .world-ul ul li.active{
        background: url(./img/world/bg-navsub-active.png) center right no-repeat;
        cursor: unset
    }
    .world .world-box .world-ul ul li a{
        display: block;
        height: 57px;
    }
    .world .world-box .world-ul ul li:nth-child(1) a{
        background: url(./img/world/img-navsub-word-1.png) center no-repeat
    }
    .world .world-box .world-ul ul li:nth-child(2) a{
        background: url(./img/world/img-navsub-word-2.png) center no-repeat
    }
    .world .world-box .world-ul ul li:nth-child(3) a{
        background: url(./img/world/img-navsub-word-3.png) center no-repeat
    }

    .world .world-li .story{
        width: 100%;
    }
    .world .world-li .hidden{
        display: none;
    }
    .world .world-li .story{
        width: 60%;
        margin: 0 auto;
        color: #333;
        font-size: 18px;
        line-height: 34px;
    }
    .world .world-li .story span{
        font-weight: bolder;
        display: block;
        margin: 20px 0;
    }
    .world .world-li .story img{
        display: block;
        margin: 60px auto
    }

    .world .world-li .character{
        width: 80%;
        margin: 0 auto;
        color: #333;
        font-size: 18px;
        line-height: 34px;
        height: 950px;
    }
    .world .world-li .character .left{
        width: 30%;
        display: inline-block;
        vertical-align: top
    }
    .world .world-li .character .left ul{
        list-style: none;
        text-align: center
    }
    .world .world-li .character .left ul li{
        display: block;
        width: 241px;
        height: 66px;
        margin-bottom: 33px;
        background: url(./img/world/character/bg-btns.png) center bottom;
        align-items: center;
        cursor: pointer;
    }
    .world .world-li .character .left ul li.active{
        background: url(./img/world/character/bg-btns.png) center top;
        position: relative;
        cursor:unset
    }
    .world .world-li .character .left ul li.active::after{
        content: '';
        position:absolute;
        left: 250px;
        top: 20px;
        z-index: 2;
        width: 0;
        height: 0;
        border-top: 11px solid transparent;
        border-bottom: 11px solid transparent;
        border-left: 18px solid #0c1e3f;
        border-right: 0;
    }
    .world .world-li .character .left ul li img{
        margin-top: 15px;
    }
    .world .world-li .character .right{
        width: 69%;
        display: inline-block;
        vertical-align: top
    }
    .world .world-li .character .right ul{
        list-style: none;
        width: 100%;
    }
    .world .world-li .character .right ul li {
        display: none;
        position: relative;
    }
    .world .world-li .character .right ul li.show{
        display: block
    }
    .world .world-li .character .right ul li .role{
        position: absolute;
        right: 0;
        top: -80px;
    }
    .world .world-li .character .right ul li .title img{
        display: block;
        /* width: 100%; */
        padding-bottom: 5px;
        border-bottom: 4px solid black;
    }
    .world .world-li .character .right ul li .title>span{
        display: block;
        width: 65%;
        height: 2px;
        background: black
    }
    .world .world-li .character .right ul li .title p{
        display: block;
        padding-right: 55%;
        font-size: 18px;
        line-height: 24px;
        margin: 20px 0;
        color: #0a132c;
    }

    .world .world-li .keywords{
        width: 80%;
        margin: 0 auto;
        color: #333;
        font-size: 18px;
        line-height: 34px;
    }
    .world .world-li .keywords p{
        font-size: 18px;
        line-height: 34px;
        color: #0a132c;
        margin-bottom: 60px;
    }
</style>
<body>
    <div class="world">
       <div class="banner-world"></div> 
       <div class="world-box">
            <div class="world-ul">
                <ul>
                    <li class="world_li_1 active"><a></a></li>
                    <li class="world_li_2"><a></a></li>
                    <li class="world_li_3"><a></a></li>
                </ul>
            </div>
            <div class="world-li">
                <div class="world_li_1 story">
                    <span>西历2015年。</span>
                    魔术尚成立的最后的时代。
                    <br>
                    <br>
                    社会是由人之手构筑起来的，但掌握着世界真理的，却是魔术师。
                    <br>
                    魔术司掌着科学无法解释的人类过去的技术，科学则累积着魔术无法达成的人类未来的技术。
                    <br>
                    这两种决无法相容的学问之学徒，仅在某一点上是志同道合的。
                    <br>
                    无论是魔术还是科学，都是为了给钻研的人类带来更为长久的繁荣
                    <br>
                    <span>——也就是，守护人类历史。</span>
                    <img src="./img/world/story/img-word-story-1.jpg" alt="">
                    <span>人理延续保障机构·迦勒底</span>
                    观测仅靠魔术无法看见，仅靠科学无法测量的世界，预防会导致人类决定性灭绝事件的特务机构。<br>
                    把优先让人类史延续下去作为至尊理念的这里不分魔法、科学，集结了各领域的研究者。<br>
                    <br>
                    西历1950年，现象记录电脑使魔·拉普拉斯研究成功。<br>
                    西历1990年，拟似地球环境模型·迦勒底亚斯完成。<br>
                    西历1999年，近未来观测透镜·示巴完成。<br>
                    西历2004年，守护英灵召唤系统·命运完成。<br>
                    西历2015年，灵子演算装置·特里斯墨吉斯忒斯完成。<br><br>
                    <span>人理延续保障机构不断完成辉煌的成果，得以保证人类史将来100年内的安全。</span>
                    <img src="./img/world/story/img-word-story-2.jpg" alt="">
                    <span>然而2015年。</span>
                    示巴所观测到的未来领域毫无前兆地消失。<br>
                    根据计算，发现——不，是证明了人类将于2016年灭绝。
                    <br><br>
                    为什么。怎么会。是谁。做了什么。<br>
                    面对众多疑问，迦勒底的研究者们陷入了疑惑。<br>
                    <img src="./img/world/story/img-word-story-3.jpg" alt="">
                    <span>就在这时，示巴观测到了新的异变。</span>
                    <br>
                    西历2004年，在日本的某个地方都市。<br>
                    在这里，出现了从未出现过的 <b>「无法观测的领域」。</b><br><br>
                    迦勒底将这里假定为人类灭绝的原因，决定执行尚处于试验阶段的第六实验。<br>
                    那就是回到过去的时间旅行。<br>
                    将术者灵子化送往过去，通过介入事象，寻找出时空奇点，究明真相或予以破坏的禁断的仪式。<br>
                    <span>其名为圣杯探索——冠位指定（Grand Order）</span>
                    这是一切为保卫人类，与人类历史对抗，与命运作战存在的总称。<br><br><br>
                </div>
                <div class="world_li_2 character hidden">
                    <div class="left">
                        <ul>
                            <li class="char_1 active"><img src="./img/world/character/txt-name-word-1.png"></li>
                            <li class="char_2"><img src="./img/world/character/txt-name-word-2.png"></li>
                            <li class="char_3"><img src="./img/world/character/txt-name-word-3.png"></li>
                            <li class="char_4"><img src="./img/world/character/txt-name-word-4.png"></li>
                            <li class="char_5"><img src="./img/world/character/txt-name-word-5.png"></li>
                            <li class="char_6"><img src="./img/world/character/txt-name-word-6.png"></li>
                        </ul>
                    </div>
                    <div class="right">
                        <ul>
                            <li class="show char_1">
                                <div class="title">
                                    <img src="./img/world/character/title-word-1.png" alt="">
                                    <span></span>
                                    <p>在人理延续保障机构（迦勒底）的御主后补中，为了填补人员空缺而被找来的「新手」。</p>
                                    <p>为了纠正混乱的人类历史，使用英灵召唤系统「命运」召唤从者，踏上了寻找7个圣杯（Grand Order）之旅。</p>
                                </div>
                                <img src="./img/world/character/img-role-word-1.png" alt="" class="role">
                            </li>
                            <li class="char_2">
                                <div class="title">
                                    <img src="./img/world/character/title-word-2.png" alt="">
                                    <span></span>
                                    <p>在人理延续保障机构（迦勒底）与主人公邂逅的拥有不可思议氛围的心地善良少女。 称主人公为「前辈」。</p>
                                </div>
                                <img src="./img/world/character/img-role-word-2.png" alt="" class="role">
                            </li>
                            <li class="char_3">
                                <div class="title">
                                    <img src="./img/world/character/title-word-3.png" alt="">
                                    <span></span>
                                    <p>与玛修一起遇到主人公的可爱动物。一直在迦勒底中自由自在地漫步。</p>
                                </div>
                                <img src="./img/world/character/img-role-word-3.png" alt="" class="role">
                            </li>
                            <li class="char_4">
                                <div class="title">
                                    <img src="./img/world/character/title-word-4.png" alt="">
                                    <span></span>
                                    <p>出身于魔术名门阿尼姆斯菲亚，人理延续保障机构（迦勒底）的所长。观测未来，并想回避2016年人类的灭亡。</p>
                                </div>
                                <img src="./img/world/character/img-role-word-4.png" alt="" class="role">
                            </li>
                            <li class="char_5">
                                <div class="title">
                                    <img src="./img/world/character/title-word-5.png" alt="">
                                    <span></span>
                                    <p>人理延续保障机构（迦勒底）的医生。负责管理御主候补们的健康情况。</p>
                                </div>
                                <img src="./img/world/character/img-role-word-5.png" alt="" class="role">
                            </li>
                            <li class="char_6">
                                <div class="title">
                                    <img src="./img/world/character/title-word-6.png" alt="">
                                    <span></span>
                                    <p>造访人理延续保障机构（迦勒底）的主人公邂逅的性格直率的青年。</p>
                                    <p>是制作了近未来观测透镜「示巴」的魔术师。本应为守护人理奉献自己的毕生，但是……。</p>
                                </div>
                                <img src="./img/world/character/img-role-word-6.png" alt="" class="role">
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="world_li_3 keywords hidden">
                    <img src="./img/world/keywords/txt-word-keywords-1.png" alt="">
                    <p>为争夺被称为「圣杯」的「能实现任何愿望的奇迹」，7位御主与7名从者两两组成队伍，拼上自己的性命争斗到只剩下最后一组为止。</p>
                    <img src="./img/world/keywords/txt-word-keywords-2.png" alt="">
                    <p>拥有让从者服从的资格，并参加圣杯战争的魔术师。本作主人公也会作为御主投身到围绕着圣杯的战斗中。</p>
                    <img src="./img/world/keywords/txt-word-keywords-3.png" alt="">
                    <p>服从御主的从者。神话、传说中的英雄化身而成的使魔。为了让御主成为圣杯战争的胜利者，听从御主的命令，与其他御主（以及其从者）
                        战斗的争斗代行者。各自拥有被称为宝具的强大武器。</p>
                    <img src="./img/world/keywords/txt-word-keywords-4.png" alt="">
                    <p>拥有让获得自己的人的愿望实现的力量。也被称为「万能之釜」或是「愿望机」。为获得圣杯而展开的争斗被称为圣杯战争。</p>
                    <img src="./img/world/keywords/txt-word-keywords-5.png" alt="">
                    <p>御主手背上出现的印记，证明拥有参加圣杯战争资格的纹样。</p>
                    <img src="./img/world/keywords/txt-word-keywords-6.png" alt="">
                    <p>圣杯为了将那些作为没有意志的纯粹「力量」被召唤、使役的英灵，作为假设物质进行具现化而准备的职责（容器）。
                        通常有 <b>「Saber」</b><b>「Archer」</b><b>「Lancer」</b><b>「Rider」</b><b>「Caster」</b><b>「Berserker」</b><b>「Assassin」</b>这七种职阶。除此之外，有时还会用到其他职阶。
                        从者们各自拥有自己作为英灵的名字（真名），但历史上的各种事迹可能会暴露自己的弱点，因此通常会以职阶进行称呼。</p>
                </div>
            </div>
       </div>
    </div>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(".world .world-li .character .left ul li").click(function(){
            $li = $(this)
            $li.addClass("active").siblings().removeClass("active")
            var txt = $li.attr("class").slice(0,6)
            $(`.world .world-li .character .right ul li.${txt}`).addClass("show").siblings().removeClass("show")
        })
        $(".world .world-box .world-ul ul li").click(function(){
            $li = $(this)
            $li.addClass("active").siblings().removeClass("active")
            var txt = $li.attr("class").slice(0,10)
            console.log($(`.world .world-box .world-li div>.${txt}`))
            $(`.world .world-box .world-li div.${txt}`).removeClass("hidden").siblings().addClass("hidden")
        })
    </script>
</body>
</html>